html {
	height: 100%;
	font-size: 16px;
	body {
		height: 100%;
	}
}
.traning {
	height: 100%;
	position: relative;
	flex-direction: column;
	.video-wrapper {
		video {
			width: 100%;
		}
	}
	.controls {
		height: 4rem;
		line-height: 4rem;
		text-align: center;
		width: 100%;
		.iconfont {
			font-size: 2rem;
			&.active {
				background-color: #68a9ff;
			}
		}
		.progress {
			position: absolute;
			width: 0;
			height: 100%;
			background-color: #ff6060;
			z-index: -1;
		}
	}
	.bgc {
		width: 100%;
		background-color: #0d0d0d;
		.part {
			height: 100%;
			color: white;
			position: relative;
			.progress {
				position: absolute;
				left: 5%;
				bottom: 3.75rem;
				font-size: 2.3rem;
			}
			.title {
				position: absolute;
				left: 5%;
				bottom: 2rem;
			}
		}
	}
}
.mask {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 255, 0.8);
	color: white;
	display: none;
	.title {
		height: 2rem;
		line-height: 2rem;
	}
	.btn-grop {
		width: 70%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		div {
			flex-direction: column;
			width: 6rem;
			height: 6rem;
			border-radius: 3rem;
			.iconfont {
				margin-bottom: 0.625rem;
				font-size: 1.5rem;
			}
			&:first-child {
				background-color: #79f0c2;
			}
			&:last-child {
				background-color: #ff6060;
			}
		}
	}
	.current {
		width: 70%;
		position: absolute;
		left: 50%;
		top: 62%;
		transform: translateX(-50%);
		height: 5.5rem;
		border: 1px solid white;
		text-align: center;
		p {
			height: 100%;
			img {
				height: 100%;
				width: 100%;
			}
		}
		h6 {
			margin-bottom: 6px;
		}
		.text {
			font-size: 0.875rem;
		}
	}
}
